import Feature from "ol/Feature";
import { fromLonLat } from "ol/proj";
import Polygon from "ol/geom/Polygon";
import LineString from "ol/geom/LineString";
import Point from "ol/geom/Point";
import { Style, Icon, Text, Fill, Stroke, Circle } from "ol/style";
import VectorSource from "ol/source/Vector";
import ImageStatic from "ol/source/ImageStatic";
import VectorLayer from "ol/layer/Vector";
import ImageLayer from "ol/layer/Image";

/**
 * 添加方向线
 * @param {} map
 */
export async function addArrowLine(map) {
  const [remoteData, ..._] = await fetch("/data/datav.json")
    .then((response) => response.json())
    .catch((error) => console.error("Error:", error));
  const data = remoteData.geometry.coordinates;
  const vectorSource = new VectorSource({ wrapX: false });
  const linestring = new LineString(data);
  const line = new Feature({
    geometry: linestring,
    name: "demoline",
    description: "西安-北京",
  });
  const styleFunction = function (feature) {
    const geometry = feature.getGeometry();
    const styles = [
      // linestring
      new Style({
        stroke: new Stroke({
          color: "rgb(0, 186, 107)", // "#ffcc33",
          width: 12,
        }),
      }),
    ];

    geometry.forEachSegment(function (start, end) {
      const dx = end[0] - start[0];
      const dy = end[1] - start[1];
      const center = [start[0] + dx / 2, start[1] + dy / 2];
      const rotation = Math.atan2(dy, dx);
      // arrows
      styles.push(
        new Style({
          geometry: new Point(center),
          image: new Icon({
            src: "/images/arrow.png",
            anchor: [0.5, 0.5],
            scale: [0.3, 0.28],
            rotateWithView: true,
            rotation: -rotation,
          }),
        })
      );
    });

    return styles;
  };
  // line.setStyle(
  //   new Style({
  //     stroke: new Stroke({
  //       width: 4,
  //       color: "#ffcc33",
  //     }),
  //   })
  // );
  data.forEach((v, i) => {});
  vectorSource.addFeature(line);
  const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: styleFunction,
  });
  map.addLayer(vectorLayer);
}

/**
 *添加图片
 * @param {*} map
 */
export function addImage(map) {
  const imageLayer = new ImageLayer({
    source: new ImageStatic({
      url: "/images/R-C.jpg",
      imageExtent: [
        108.97081, 34.186299, 108.973553, 34.188625,
        // 左 ，下，右， 上
      ],
    }),
  });
  map.addLayer(imageLayer);
}

/**
 *
 * 绘制面
 * @param {*} map
 */
export function addPolygon(map) {
  const data = [
    [
      [108.933946, 34.323834],
      [114.329647, 30.67624],
      [104.04147, 30.555333],
    ],
  ];
  const vectorSource = new VectorSource({ wrapX: false });
  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });

  const polygon = new Feature({
    geometry: new Polygon(data),
    name: "polygon-demo",
    description: "西安-武汉-成都",
  });
  polygon.setStyle(
    new Style({
      stroke: new Stroke({
        width: 1,
        color: "#CCC",
      }),
      fill: new Fill({
        color: "rgba(200,100,100, 0.8)",
      }),
    })
  );
  vectorSource.addFeature(polygon);
  map.addLayer(vectorLayer);
}

/**
 * 绘制直线
 * @param {*} map
 */
export function addLine(map) {
  const data = [
    [108.948024, 34.263161],
    [116.3904, 39.903],
  ];
  const vectorSource = new VectorSource({ wrapX: false });
  const linestring = new LineString(data);
  const line = new Feature({
    geometry: linestring,
    name: "demoline",
    description: "西安-北京",
  });
  line.setStyle(
    new Style({
      stroke: new Stroke({
        width: 4,
        color: "#fb920a",
      }),
    })
  );
  vectorSource.addFeature(line);
  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });
  map.addLayer(vectorLayer);
}

/**
 * 绘制点
 * @param {*} map
 */
export function addPoint(map) {
  const vectorSource = new VectorSource({ wrapX: false });
  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });
  map.addLayer(vectorLayer);

  /// 标记点
  const xian = new Feature({
    geometry: new Point([108.948024, 34.263161]),
    name: "西安",
    description: "西安",
  });
  const marker = new Feature({
    geometry: new Point([116.3904, 39.903]),
    name: "北京",
    description: "北京市海淀区",
  });
  xian.setStyle(
    new Style({
      image: new Circle({
        radius: 6, // 圆形半径
        fill: new Fill({
          color: "#ff6688", // 填充颜色
        }),
        stroke: new Stroke({
          color: "#555555", // 边框颜色
          width: 2, // 边框宽度
        }),
      }),
      text: new Text({
        text: "西安",
        font: "12px sans-serif",
        fill: new Fill({
          color: "green",
        }),
        stroke: new Stroke({
          color: "white",
          width: 1,
        }),
        offsetX: 0,
        offsetY: -14,
      }),
    })
  );
  marker.setStyle(
    new Style({
      image: new Icon({
        anchor: [0.5, 1], // 图标锚点位置
        anchorXUnits: "fraction", // 锚点 X 坐标单位为分数
        anchorYUnits: "fraction", // 锚点 Y 坐标单位为分数
        color: "#fff",
        scale: [0.03, 0.03],
        opacity: 1,
        src: "/images/loc_blue.png", //"https://gd-hbimg.huaban.com/3ab2efae37ebf2d6389aaecac986f7ac36cb77392ca3-sFtqKl_fw658webp", // 图标文件的路径
      }),
      text: new Text({
        text: "北京",
        font: "12px sans-serif",
        fill: new Fill({
          color: "green",
        }),
        stroke: new Stroke({
          color: "white",
          width: 1,
        }),
        offsetX: 0,
        offsetY: -30,
      }),
    })
  );

  vectorSource.addFeature(marker);
  vectorSource.addFeature(xian);
}
